<template>
  <div style="display: flex; justify-content: center; align-items: center">



        <el-card @click.native="goToDetail()">
          <img src="../assets/1.jpg" width="100%" height="233" @click="goToDetail()">
          <p style="font-size: 14px;height: 30px">
            服务名：{{p.name}}
          </p>
          <p style="font-size: 12px">
            服务简介:<b>{{p.description}}</b>
          </p>
        </el-card>



<!--    <el-row class="" gutter="24">-->
<!--      <el-col span="6" v-for="p in serviceItemDate">-->
<!--        <el-card @click.native="goToDetail()">-->
<!--          <img :src="p.url" width="100%" height="233" @click="goToDetail()">-->
<!--          <p style="font-size: 14px;height: 30px">-->
<!--            {{p.title}}-->
<!--          </p>-->
<!--          <p style="font-size: 12px">-->
<!--            <b>￥{{p.price}}</b> <s>{{p.oldPrice}}</s>-->
<!--            <span style="float: right">销量:{{p.saleCount}}件</span>-->
<!--          </p>-->
<!--        </el-card>-->
<!--      </el-col>-->
<!--    </el-row>-->
  </div>
</template>

<script>
export default {
  name: "IndexResult",
  data() {
    return {
      info: "",
      p: {},
      serviceItemDate: [
        {id: 1, title: '服务名', url: require("../assets/1.jpg"), price: 10, saleCount: 10},
        {id: 2, title: '服务名', url: require("../assets/2.jpg"), price: 10, saleCount: 10},
        {id: 3, title: '服务名', url: require("../assets/3.jpg"), price: 10, saleCount: 10},
        {id: 4, title: '服务名', url: require("../assets/4.jpg"), price: 10, saleCount: 10},
        {id: 5, title: '服务名', url: require("../assets/5.jpg"), price: 10, saleCount: 10},
        {id: 6, title: '服务名', url: require("../assets/6.jpg"), price: 10, saleCount: 10},
        {id: 7, title: '服务名', url: require("../assets/7.jpg"), price: 10, saleCount: 10},
        {id: 8, title: '服务名', url: require("../assets/8.jpg"), price: 10, saleCount: 10},

      ],
    };
  },
  methods: {
    goToDetail() {
      console.log("点击")
      //加“/”就指定对应路径，不加直接写改的是当前路劲最末未的
      //this.$router.push({ path: 'detail', query: { id: 123 } });
      this.$router.push({name: 'detail', params: {id: 123}});
      location.reload();
    },
    loadSerch() {
      console.log("info:",this.info);

      let url = 'http://localhost:9081/serve-item/select/'+this.info;
      console.log('url = ' + url);

      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody.state == 20000) {
          this.$message({
            showClose: true,
            message: '查询成功！',
            type: 'success'
          });
          this.p = responseBody.data;

        } else {
          this.$message({
            showClose: true,
            message: responseBody.message,
            type: 'error'
          });
        }
      });
    },
  },
    mounted() {

      this.info = this.$route.params.wd;
      this.loadSerch();

    }
  }
</script>

<style scoped>

</style>